<style type="text/css">
    .flex{
        height: 40px;
    }
    .outer{
        height: 40px;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div id="append" style="display: none;">
        {foreach name="channel" item="vo"}
        <p data-id="{$vo.name}" data-firstRelease="{$vo.firstRelease}">{$vo.name}</p>
        {/foreach}
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">待支付:</label>
        <div class="col-xs-12 col-sm-8">
            <input value="{$data.nopay}" data-rule="" class="form-control" readonly="readonly">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">活动店铺:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-shop_no" data-rule="required" class="form-control selectpicker" data-live-search="true" name="row[shop_no]">
                {foreach name="shop" item="vo"}
                <option value="{$vo.shop_no}" {in name="$vo.id" value="$ids"}selected{/in}>{$vo.shop_name}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">商家地址:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-address" class="form-control" type="text" readonly="readonly" value="{$data.address}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">活动平台:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-shop_type" class="form-control" type="text" readonly="readonly" value="{$data.shop_type}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">店铺二维码:</label>
        <div class="col-xs-12 col-sm-8">
            <ul class="row list-inline faupload-preview" id="c-qrcode">
                {foreach $data.qrcode as $qrcode}
                <li class="col-xs-3">
                    <a href="" data-url="" target="_blank" class="thumbnail"><img src="{$data.domain|htmlentities}{$qrcode|htmlentities}" class="img-responsive"></a>
                </li>
                {/foreach}
            </ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">活动类型:</label>
        <div class="col-xs-12 col-sm-8">
            
            <input id="c-play_type" data-rule="required" data-source="general/config/get_configs?name=play_type" data-search-field="name" class="form-control selectpage" name="row[play_type]" type="text" value="1">
        </div>
    </div>
    <div class="form-group" id="is_qcsc" style="display: none;">
        <label class="control-label col-xs-12 col-sm-2">显示位置:</label>
        <div class="col-xs-12 col-sm-8">
            <select  id="c-is_qcsc"  class="form-control selectpicker" name="row[is_qcsc]">
                <!-- <option value="">请选择</option> -->
                <option value="0">不在全城试吃显示</option>
                <option value="1">在全城试吃显示</option>
            </select>
        </div>
    </div>
    <div class="form-group" id="user_pay">
        <label class="control-label col-xs-12 col-sm-2">用户实付金额:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-user_pay" data-rule="required" class="form-control" name="row[user_pay]" type="number" value="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">商家结算金额:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-shop_settlement" data-rule="required" class="form-control" name="row[shop_settlement]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">活动名额:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-num" data-rule="required" class="form-control" name="row[num]" type="number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">分发渠道:</label>
        <div class="col-xs-12 col-sm-10" id="channel" data-serviceamt='{$data.shop_serviceamt}'>
            <div class="flex" >
                <div class="col-xs-12 col-sm-3">
                    <select data-rule="required" class="form-control selectpicker" name="row[channel_id][]">
                        <option value="">请选择</option>
                        <option value="吃喝不愁" selected>吃喝不愁</option>
                    </select>
                </div>
                <div class="col-xs-12 col-sm-3">
                    <input type="text" name="row[mf][]" placeholder="" class="form-control" value="" readonly="readonly">
                </div>
                <div class="col-xs-12 col-sm-2">
                    <input type="text" name="row[quota][]" placeholder="名额" class="form-control" id="chbcquota">
                </div>
                <div class="col-xs-12 col-sm-3">
                    <select data-rule="required" class="form-control selectpicker" name="row[channel_status][]">
                        <option value="">请选择</option>
                        <option value="已分发" selected>已分发</option>
                    </select>
                </div>
                <div class="col-xs-12 col-sm-1">
                    <button type="button" class="btn btn-info btn-append">追加</button>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">活动日期:</label>
        <div class="col-xs-12 col-sm-8">
            <input data-rule="required" type="text" class="form-control datetimerange" data-time-picker="false" placeholder="活动日期" name="row[date_range]" date-show-dropdowns="true" value="" autocomplete="off" /> 
        </div>
    </div>
    <!-- <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">活动日期:</label>
        <div class="col-xs-12 col-sm-8">
            <input data-rule="required" id="c-start_date" type="text" class="form-control datetimepicker" data-date-format="YYYY-MM-DD" placeholder="" name="row[start_date]" value="" style="width: 40%" />
            至
            <input data-rule="required" id="c-end_date" type="text" class="form-control datetimepicker" data-date-format="YYYY-MM-DD" placeholder="" name="row[end_date]" value="" style="width: 40%" />
        </div>
    </div> -->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">每日时间:</label>
        <div class="col-xs-12 col-sm-8">
            <input data-rule="required" id="c-start_time_str" type="text" class="form-control datetimepicker" data-date-format="HH:mm" placeholder="开始时间，例：10:00" name="row[start_time_str]" value="{$data.startstr}" style="width: 40%" />
            至
            <input data-rule="required" id="c-end_time_str" type="text" class="form-control datetimepicker" data-date-format="HH:mm" placeholder="结束时间，例：14:00" name="row[end_time_str]" value="{$data.endstr}" style="width: 40%" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">活动方案:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-scheme_no" data-rule="required" data-source="general/config/get_configs?name=play_scheme" data-search-field="name" class="form-control selectpage" name="row[scheme_no]" type="text" value="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">活动标签:</label>
        <div class="col-xs-12 col-sm-8">
            
            <input id="c-play_label" data-rule="" data-source="general/config/get_configs?name=play_label" data-search-field="name" class="form-control selectpage" name="row[play_label]" type="text" value="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">机审需求:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-machine_audit" data-rule="" data-source="general/config/get_configs?name=machine_audit" class="form-control selectpage" name="row[machine_audit]" type="text" value="1">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">备注:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-remarks" data-rule="" class="form-control" name="row[remarks]" type="text">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">下单次数限制:</label>
        <div class="col-xs-12 col-sm-8">
            
            <div class="radio">
                <label for="row[times_limit]-0"><input id="row[times_limit]-0" name="row[times_limit]" type="radio" value="0"checked /> 不限制</label>
                <label for="row[times_limit]-1"><input id="row[times_limit]-1" name="row[times_limit]" type="radio" value="1" /> 限制</label>
            </div>
        </div>
    </div>
    <div class="form-group" id="xdcs" style="display: none;">
        <label class="control-label col-xs-12 col-sm-2">下单次数:</label>
        <div class="col-xs-12 col-sm-8">
            每
            <input id="c-jt" type="text" class="form-control" placeholder="几" name="row[jt]" value="" style="width: 40%" />
            天
            <input id="c-jc" type="text" class="form-control" placeholder="几" name="row[jc]" value="" style="width: 40%" />
            次
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>


<script type="text/javascript">

    $(document).ready(function () {
        $(document).on('change', '#chbcquota', function (e) {
            var num = $('#c-num').val();
            var chbcquota = $('#chbcquota').val();
            if (num && chbcquota && num>chbcquota*5) {
                $('#chbcquota').val(Math.ceil(num/5));
            }
        })
        $(document).on('change', '#c-num', function (e) {
            var num = $('#c-num').val();
            var chbcquota = $('#chbcquota').val();
            if (num && chbcquota && num>chbcquota*5) {
                $('#chbcquota').val(Math.ceil(num/5));
            }
            if (num && !chbcquota) {
                $('#chbcquota').val(Math.ceil(num/5));
            }
        })
        $(document).on('click', '.btn-append', function (e) {
            // 吃喝不愁活动名额要大于总活动名额的20%
            var chbcquota = $('#chbcquota').val();
            var num = $('#c-num').val();
            // if (num>chbcquota*5) {
            //     alert('吃喝不愁活动名额需要占总名额的2成或以上');
            //     return false;
            // }
            var channelarr = '';
            $('#append p').each(function (i,j) {
                var name=$(j).data('id')
                var firstRelease=$(j).attr('data-firstRelease')
                channelarr+='<option data-firstRelease="'+firstRelease+'" value="'+name+'">'+name+'</option>'
            })
            var sf = `<div class="col-xs-12 col-sm-3 sf" style="text-align:center;color:red;display:none;">首发</div>`
            var html = `<div class="flex">
                <div class="col-xs-12 col-sm-3">
                    <select data-rule="required" class="form-control selectpicker" name="row[channel_id][]" onchange="choose(this);">
                        <option value="">请选择</option>`+channelarr+
                    `</select>
                </div>`+sf+`</div>
            <div class="outer">
                <div class="col-xs-12 col-sm-3">
                    <input type="text" name="row[mf][]" placeholder="" class="form-control" value="" readonly="readonly">
                </div>
                <div class="col-xs-12 col-sm-3">
                    <input type="text" name="row[quota][]" placeholder="名额" class="form-control">
                </div>
                <div class="col-xs-12 col-sm-3">
                    <select data-rule="required" class="form-control selectpicker" name="row[channel_status][]">
                        <option value="未分发">未分发</option>
                        <option value="已分发">已分发</option>
                        <option value="无法分发已处理">无法分发已处理</option>
                    </select>
                </div>
                <div class="col-xs-12 col-sm-2" style="text-align:center">
                    <a href="javascript:;" onclick="copyinform(this)">复制</a>
                </div>
                <div class="col-xs-12 col-sm-1">
                    <button type="button" class="btn btn-danger btn-remove">删除</button>
                </div>
            </div>`;
            $("#channel").append(html);
            return false;
        });
        $(document).on('click', '.btn-remove', function (e) {
            $(this).parents(".outer").prev('.flex').remove();
            $(this).parents(".outer").remove();
            return false;
        });
        $('#c-user_pay').change(function () {
            var serviceamt = $('#channel').attr('data-serviceamt')
            serviceamt = JSON.parse(serviceamt)
            console.log(serviceamt)
            deal(serviceamt)
        })
        $('#c-shop_settlement').change(function () {
            var serviceamt = $('#channel').attr('data-serviceamt')
            serviceamt = JSON.parse(serviceamt)
            console.log(serviceamt)
            deal(serviceamt)
        })
    });
    function choose(e) {
        var channel_name=$(e).val()
        var serviceamt = $('#channel').attr('data-serviceamt')
        serviceamt = JSON.parse(serviceamt)
        deal(serviceamt)
        var firstRelease = $(e).find("option:selected").attr('data-firstRelease')
        if (firstRelease>0) {
            $(e).parents('div').next('.sf').hide()
        } else {
            $(e).parents('div').next('.sf').show()
        }
        //餐标，名额，分发状态更新
        $(e).parents('.flex').next('.outer').find('input[name="row[quota][]"]').val('')
        $(e).parents('.flex').next('.outer').find('select[name="row[channel_status][]"]').val('')
        $(e).parents('.flex').next('.outer').find('select[name="row[channel_status][]"]').selectpicker('render');
    }
    function deal(serviceamt) {
        console.log(serviceamt)
        if (parseInt($('#c-user_pay').val())>0 && parseInt($('#c-shop_settlement').val())>0) {
            $('#channel .flex').each(function (i,j) {
                var channel_name=$(j).find('div').eq(0).find('.selectpicker').val()
                var mf = ''
                for (var i = serviceamt.length - 1; i >= 0; i--) {
                    if (serviceamt[i].channel_name==channel_name) {
                        var f=parseInt($('#c-shop_settlement').val())-serviceamt[i].service_amt
                        mf='满'+parseInt($('#c-user_pay').val())+'返'+f
                    }
                }
                $(j).next('.outer').find('input').eq(0).val(mf)
                $(j).find('input').eq(0).val(mf)
            })
        }
    }
    function copyinform(e) {
        var shop_name = $('#c-shop_no').find("option:selected").text()
        var shop_type = $('#c-shop_type').val()
        var mf = $(e).parents('.outer').find('input').eq(0).val()
        var me = $(e).parents('.outer').find('input').eq(1).val()+'单'
        var scheme = $('#c-scheme_no_text').val()
        var date = $('input[name="row[date_range]"]').val()
        if (!date) {
            alert('请设置活动日期')
        }
        var arr = date.split(' - ')
        var start_date = new Date(arr[0]).getTime();
        start_date = new Date(start_date);
        var end_date = new Date(arr[1]).getTime();
        end_date = new Date(end_date);
        date = (start_date.getMonth()+1)+'月'+start_date.getDate()+'-'+(end_date.getMonth()+1)+'月'+end_date.getDate()
        var start_time = $('#c-start_time_str').val()
        var end_time = $('#c-end_time_str').val()
        // 备注
        var remark = $('#c-remarks').val()
        var jt = $('#c-jt').val()
        var jc = $('#c-jc').val()
        var textarea = shop_name+'，'+shop_type+"\r\n"+mf+'，'+me+'，'+scheme+"\r\n"+date+'，'+start_time+'-'+end_time
        if (remark) {
            textarea=textarea+"\r\n备注："+remark
        }
        if (jt && jt!=0) {
            textarea=textarea+"\r\n限购："+jt+'天'+jc+'次'
        }
        copyToClipboard_js(textarea)
        // alert('复制成功')
    }
    function copyToClipboard_js(txt) {
        var temp = document.createElement("textarea"); //声明创建一个input元素
        document.body.appendChild(temp); //在body中追加input元素
        temp.value = txt; //把要复制的文字赋予input元素
        temp.select(); //选择要复制的文字
        document.execCommand("copy"); //把文字复制到剪贴板
        document.body.removeChild(temp); //移除body追加的input元素
    }
</script>
